<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no,minimal-ui"/>
  <title>Mojito</title>
  <script src="../js/base.js"></script>
  <link rel="stylesheet" href="../plugins/vant/vant.min.css">
  <link rel="stylesheet" href="../styles/common.css"/>
  <link rel="stylesheet" href="../styles/login.css"/>
</head>
<body>
  <div id="login" class="app">
    <div class="divHead">
      <div class="divTitle">
        登录<i @click="toMainPage"><van-icon name="wap-home-o" /></i>
      </div>
    </div>
    <div class="logo">
      <img src="../images/login-logo.png" alt="" />
    </div>
    <div class="divContainer">
      <div class="email">
        <van-field v-model="qqNum" type="digit" placeholder="请输入QQ号码">
          <template #extra>
            <span>{{suffix}}</span>
          </template>
        </van-field>
      </div>
      <div class="divSplit"></div>
      <div class="code">
        <van-field v-model="code" type="digit" placeholder="请输入验证码" maxlength="6">
          <template #extra>
            <van-button v-if="countdown==-1" size="small" :disabled="!qqNum" @click="getCode">获取验证码</van-button>
            <span v-else style="color: #c0c4cc">{{countdown}}s后重新获取</span>
          </template>
        </van-field>
      </div>
    </div>
    <van-button :class="{btnLogin:true,able:canLogin}" :disabled="!canLogin" @click="login">登录</van-button>
  </div>
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="../plugins/vue/vue.js"></script>
  <!-- 引入组件库 -->
  <script src="../plugins/vant/vant.min.js"></script>
  <!-- 引入axios -->
  <script src="../plugins/axios/axios.min.js"></script>
  <script src="../js/request.js"></script>
  <script src="../api/common.js"></script>
  <script src="../api/user.js"></script>
  <script>
    new Vue({
      el: "#login",
      data() {
        return {
          qqNum: '',
          code: '',
          suffix: '@qq.com',
          countdown: -1
        }
      },
      created() {},
      computed: {
        canLogin() {
          return this.qqNum && this.code.length === 6
        }
      },
      methods: {
        // 获取验证码
        getCode() {
          const qqNumReg = /[1-9][0-9]{4,}/
          if (qqNumReg.test(this.qqNum)) {
            getCodeApi(this.qqNum + this.suffix, 'login').then(res => {
              // 进行倒计时
              this.countdown = 60
              let clock = window.setInterval(() => {
                this.countdown--
                if (this.countdown < 0) {
                  window.clearInterval(clock)  // 停止计时
                }
              }, 1000)
            }).catch(error => {
              this.$dialog.alert({title: '提示', message: error.message})
            })
          } else {
            this.$dialog.alert({title: '提示', message: 'QQ号码输入不正确，请重新输入'})
          }
        },
        // 登录
        login() {
          this.$toast.loading({
            duration: 0,
            forbidClick: true,
            message: '登录中'
          })
          const params = {
            email: this.qqNum + this.suffix,
            code: this.code
          }
          loginApi(params).then(res => {
            window.requestAnimationFrame(() => {
              // window.location.replace：替换当前页面地址，当前页面不会被写入浏览记录
              window.location.replace('/front/index.html')
            })
          }).catch(error => {
            this.$toast.clear()
            this.$dialog.alert({title: '提示', message: error.message})
          })
        },

        toMainPage() {
          window.requestAnimationFrame(() => {
            window.location.href = '/front/index.html'
          })
        }
      }
  })
  </script>
</body>
</html>